{% extends 'checkstand/base/index.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'bootstrapt/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block js %}
    <script src="{% static 'bootstrapt/js/echarts.min.js' %}"></script>
    <script src="{% static 'bootstrapt/js/walden.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.zh-CN.js' %}"></script>
{% endblock %}

{% block nav_menus %}class="active"{% endblock %}
{% block html_content %}

    <div class="row">
        <form class="form-horizontal " role="form">
            <legend>菜单分析</legend>
        </form>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        菜类销量占比
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="kindEchars" style="width:auto;height:500px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        每周菜品销量
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="menuEchars" style="width:auto;height:500px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel panel-heading">
                    <h3 class="panel-title">销量排行榜</h3>
                </div>
                <div class="panel-body">
                    <div id="menuTop" style="width: auto;height: 600px"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}z


{% block js_content %}
    <script>
        var menuEchars = echarts.init(document.getElementById('menuEchars'), 'walden');
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: [
                    {% for menu_kind in menu_kind_week.keys %}
                        '{{ menu_kind }}',
                    {% endfor %}
                    
                    ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            series: [
                {% for kind_name,value in menu_kind_week.items %}
                    {
                        name: '{{ kind_name }}',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: [
                            {% for v in value.values %}
                                {{ v }},
                            {% endfor %}
                        ]
                    },
                {% endfor %}



            ]
        };
        menuEchars.setOption(option);

        var kindEchars = echarts.init(document.getElementById('kindEchars'), 'walden');
        option = {
            title: {
                text: '菜类总销量：{{ menu_all }}',
                subtext: '单位（份）',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [
                    {% for key in menu_kinds.keys %}
                        '{{ key }}',
                    {% endfor %}
                ]
            },
            series: [
                {
                    name: '菜类销量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {% for key,value in menu_kinds.items %}
                            {value:{{ value }}, name: '{{ key }}'},
                        {% endfor %}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        kindEchars.setOption(option);


        var menuTop = echarts.init(document.getElementById('menuTop'), 'walden');
        option = {
            title: {
                text: '销量排行榜',
                subtext: '单位(份)'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['菜品销量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            xAxis: {
                type: 'category',
                data: [
                    {% for key in menus.keys %}
                        '{{ key }}',
                    {% endfor %}

                ]
            },
            series: [
                {
                    name: '菜品销量',
                    type: 'bar',
                    data: [
                        {% for value in menus.values %}
                            '{{ value }}',
                        {% endfor %}

                    ]
                },
            ]
        };

        menuTop.setOption(option);

    </script>
{% endblock %}